<template>
  <div id="app">
    <!--头部订单详情-->
    <div id="title">
      <el-card style="margin-bottom: 20px">
        <h1>异地委托函订单详情</h1>
      </el-card>
    </div>
    <!--内容-->
    <div class="grid-content bg-purple">
      <!--左表单-->
      <el-col :span="12" class="menued">
        <el-form :inline="true" class="demo-form-inline formed">
          <el-form-item :required="true" label="订单状态:">
            <el-select
              v-model="formInline.orderStateNamec"
              placeholder="选择状态"
            >
              <el-option
                v-for="(item, orderState_id) in orderStateName"
                :label="item.orderState_name"
                :value="item.orderState_name"
                :key="orderState_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :required="true"
            label="是否需要赔款:"
            prop="safeorderNeedmoney"
          >
            <el-radio-group
              class="peikuan"
              v-model="formInline.safeorderNeedmoney"
            >
              <el-radio label="是"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :required="true"
            label="是否发短信:"
            prop="safeorderSendmessage"
          >
            <el-radio-group v-model="formInline.safeorderSendmessage">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :required="true" label="特定事项:">
            <el-input v-model="formInline.safeorderNotice"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="短信内容:" prop="safeorderSms">
            <el-input
              type="textarea"
              v-model="formInline.safeorderSms"
            ></el-input>
          </el-form-item>
          <el-form-item :required="true" size="large" label="短信操作">
            <el-button type="primary">生成短信</el-button>
            <el-button type="primary">发送给客户</el-button>
          </el-form-item>
          <el-form-item :required="true" label="短信内容:" prop="safeorderSms">
            <el-input
              type="textarea"
              v-model="formInline.safeorderSmsdriver"
            ></el-input>
          </el-form-item>
          <el-form-item :required="true" size="large" label="短信操作">
            <el-button type="primary">生成短信</el-button>
            <el-button type="primary">发送给客户</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--右表单-->
      <el-col :span="12" class="menued">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline formed"
        >
          <el-form-item :required="true" label="联系人:">
            <el-input v-model="formInline.safeorderUser"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系电话:">
            <el-input v-model="formInline.safeorderUserphone"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="车牌号:">
            <el-input v-model="formInline.safeorderCarnumber"></el-input>
          </el-form-item>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item :required="true" label="拍照内容:">
              <el-input
                v-model="formInline.safeorderUserimage"
                placeholder="行驶证，交强险保单（并上传海涛微信）收取：行驶证"
              ></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="addmark">保存</el-button>
              <el-button type="primary" @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //formInline表单的各个值名
      formInline: {
        send: "",
        safeorderNotice: "",
        safeorderCarnumber: "",
        safeorderUser: "",
        safeorderUserphone: "",
        safeorderUserimage: "",
        safeorderNeedmoney: "",
        safeorderSendmessage: "",
        safeorderSms: "",
        safeorderSmsdriver: "",
        senddriverName: "",
        orderStateNamec: ""
      },
      //获取订单状态
      orderStateName: []
    };
  },
  methods: {
    //当点击保存按钮时 触发的函数事件
    addmark: function() {
      this.$axios
        .post(
          "http://172.16.5.182:8080/safe/order/add", //用post链接后台对应的接口
          JSON.stringify({
            safeorderGocompany: this.formInline.safeorderGocompany,
            safeorderNotice: this.formInline.safeorderNotice,
            safeorderCarnumber: this.formInline.safeorderCarnumber,
            safeorderUser: this.formInline.safeorderUser,
            safeorderUserphone: this.formInline.safeorderUserphone,
            safeorderUserimage: this.formInline.safeorderUserimage,
            driver_area: this.formInline.driver_area,
            safeorderBackdriver: this.formInline.safeorderBackdriver,
            safeorderNeedmoney: this.formInline.safeorderNeedmoney,
            safeorderSendmessage: this.formInline.safeorderSendmessage,
            safeorderSms: this.formInline.safeorderSms,
            safeorderSmsdriver: this.formInline.safeorderSmsdriver,
            orderStateName: this.formInline.orderStateNamec
          }), //将数据传给对应的数据库的值名
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response); //打印响应
          var result = response.data; //响应出来的数据复制给结果
          if (response.status === 200) {
            //当响应状态等于200时
            this.$alert("保存成功");
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          this.$alert("请求出错");
          console.log(err);
        });
    },
    cancel() {
      //当点击取消按钮时 触发的函数事件
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.formInline.safeorderGocompany = "";
          this.formInline.safeorderGocompany = "";
          this.formInline.safeorderNotice = "";
          this.formInline.safeorderCarnumber = "";
          this.formInline.safeorderUser = "";
          this.formInline.safeorderUserphone = "";
          this.formInline.safeorderUserimage = "";
          this.formInline.safeorderBackdriver = "";
          this.formInline.safeorderNeedmoney = "";
          this.formInline.safeorderSendmessage = "";
          this.formInline.safeorderSms = "";
          this.formInline.safeorderSmsdriver = "";
          this.formInline.orderStateNamec = "";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //获取取证司机区域
    getGetarea() {
      this.$axios
        .get("http://172.16.5.182:8080/safe/driver/area")
        .then(response => {
          if (response.data.code === "200") {
            console.log(response.data.data);
            this.area = response.data.data;
            this.sendarea = response.data.data;
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取
    //根据区域获取司机信息
    getdriver(driver) {
      console.log(driver);
      this.$axios
        .post("http://172.16.5.182:8080/safe/driver/drivers", { area: driver })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.getdrivers = response.data.data;
            console.log("this.senddrives = ", this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    senddriver(val) {
      this.$axios
        .post("http://172.16.5.182:8080/safe/driver/drivers", { area: val })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.senddrives = response.data.data;
            console.log(this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取订单状态信息
    orderStateNameS() {
      this.$axios
        .post("http://172.16.5.182:8080/safe/order/orderstate")
        .then(response => {
          console.log("获取", response);
          if (response.data.code === "200") {
            this.orderStateName = response.data.data;
            console.log("this.orderStateName = ", this.orderStateName);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    }
  },
  created() {
    this.getGetarea();
    this.orderStateNameS();
  }
};
</script>

<style scoped>
.el-col-12 {
  width: 549px;
}
.el-select {
  width: 110px;
}
.menued {
  padding: 10px 150px;
}
.formed {
  text-align: left;
}
#title {
  text-align: left;
}
</style>
